<template>
  <div id="body">
    <header><div id="main" ref="lineRef"></div></header>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import '../../../public/static/theme/macarons'
export default {
  data() {
    return {
      chartInstance: null,
      totalData: {}
    }
  },
  methods: {
    initChart() {
      this.chartInstance = echarts.init(this.$refs.lineRef, 'macarons')
      const option = {
        title: {
          text: '新增趋势'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['新增确诊', '新增治愈']
        },
        xAxis: {
          type: 'category'
          // axisLabel: { interval: 0, rotate: 30 }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '新增确诊',
            type: 'line',
            smooth: true
          },
          {
            name: '新增治愈',
            type: 'line',
            smooth: true
          }
        ]
      }
      this.chartInstance.setOption(option)
    },
    async getChartData() {
      const { data: res } = await this.$jsonp(
        'https://view.inews.qq.com/g2/getOnsInfo?name=disease_other'
      )
      this.totalData = JSON.parse(res)
      let xAxisList = [],
        yAxisListConfirm = [],
        yAxisListHeal = [],
        list = {}
      // 新增确诊趋势

      list = this.totalData.chinaDayAddList.map((item) => ({
        name: item.date,
        valueConfirm: item.confirm,
        valueHeal: item.heal
      }))
      xAxisList = list.map((item) => item.name)
      yAxisListConfirm = list.map((item) => item.valueConfirm)

      yAxisListHeal = list.map((item) => item.valueHeal)

      const lineOption = {
        xAxis: {
          data: xAxisList
        },
        series: [
          {
            data: yAxisListConfirm
          },
          {
            data: yAxisListHeal
          }
        ]
      }
      this.chartInstance.setOption(lineOption)
      window.addEventListener('resize', () => {
        // 执行echarts自带的resize方法，即可做到让echarts图表自适应
        this.chartInstance.resize()
      })
    }
  },
  mounted() {
    this.initChart()
    this.getChartData()
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {
      this.myChart.resize()
    })
  }
}
</script>

<style lang="scss" scoped>
#body {
  height: 100%;
  margin-left: 10px;
  &::before {
    position: absolute;
    top: 0;
    content: '';
    left: 10px;
    height: 10px;
    width: 10px;
    border-top: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
  }
  &::after {
    position: absolute;
    top: 0;
    content: '';
    right: 0;
    height: 10px;
    width: 10px;
    border-top: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
  }
  header {
    height: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    #main {
      padding-left: 20px;
      padding-top: 10px;
      height: 100%;
      width: 100%;
      &::before {
        position: absolute;
        bottom: 30px;
        content: '';
        left: 10px;
        height: 10px;
        width: 10px;
        border-bottom: 2px solid #02a6b5;
        border-left: 2px solid #02a6b5;
      }

      &::after {
        position: absolute;
        bottom: 30px;
        content: '';
        right: 0;
        height: 10px;
        width: 10px;
        border-bottom: 2px solid #02a6b5;
        border-right: 2px solid #02a6b5;
      }
    }
  }
}
</style>
